<template>
	<view class="page">
		<view class="bg-white padding-tb-xs">
			<simple-date-picker v-model="calendarDate" @confirm="confirmCalendar"></simple-date-picker>
		</view>
		<view class="main">
			<view class="subject-list">
				<view class="subject-item" v-for="item in subjectList" :key="item.id">
					<view class="flex align-center">
						<view class="flex-1 flex align-center">
							<image style="width:36rpx;height:36rpx;" :src="item.icon" mode="aspectFit"></image>
							<u-text margin="0 0 0 10rpx" :text="item.name" size="32rpx" color="#333333"></u-text>
						</view>
						<view class="flex align-center">
							<u-icon name="/static/icon/icon-input-homework.png" size="24rpx" color="#999999"></u-icon>
							<u-text margin="0 0 0 6rpx" text="作业条录入" size="24rpx" color="#999999"
								@click="toInputHomework(item.id)"></u-text>
						</view>
					</view>
					<view>
						<view class="homework-item" v-for="(item, index) in item.content" :key="index">
							<u-text :text="`[${index + 1}] ${item.title}`" size="28rpx" color="#333"></u-text>
							<u-icon size="32rpx" name="checkmark" v-if="item.status"></u-icon>
						</view>
					</view>
					<view class="flex justify-end">
						<view class="btn-detail" @click="toDetail(item.name, item.id)">查看详情</view>
					</view>
				</view>
			</view>
			<u-calendar :show="showCalendar" :showTitle="false" color="#FFA40C" :minDate="getMinDate()"
				:defaultDate="[calendarDate]" monthNum="6" @confirm="confirmCalendar"
				@close="showCalendar = false"></u-calendar>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import SimpleDatePicker from '@/components/SimpleDatePicker/index.vue';
import dayjs from 'dayjs'
const calendarDate = ref('');
const showCalendar = ref(false);
const subjectList = ref([
	{
		id: 2,
		name: '语文',
		icon: '/static/image/img-chinese.png',
		content: [
			{
				title: '写一篇看图说话。如图',
				status: true
			},
			{
				title: '订正默写36页',
				status: false
			},
			{
				title: '读第18页',
				status: false
			}
		]
	},
	{
		id: 1,
		name: '数学',
		icon: '/static/image/img-math.png',
		content: [
			{
				title: '计算',
				status: false
			},
			{
				title: '应用题',
				status: false
			}
		]
	},
	{
		id: 3,
		name: '英语',
		icon: '/static/image/img-english.png',
		content: [
			{
				title: '听写单词',
				status: false
			},
			{
				title: '背诵课文',
				status: false
			}
		]
	},
	{
		id: 4,
		name: '其它',
		icon: '/static/image/img-other.png',
		content: [
			{
				title: '写一篇看图说话。如图',
			},
			{
				title: '订正默写36页',
			}
		]
	}
]);

onLoad(() => {
	calendarDate.value = dayjs().format('YYYY-MM-DD')
})
const toDetail = (name, id) => {
	uni.navigateTo({
		url: `/pages/common/homework/detail?name=${name}&id=${id}`
	});
};

const confirmCalendar = (date) => {
	calendarDate.value = date[0];
	showCalendar.value = false;
};

const toInputHomework = (id) => {
	uni.navigateTo({
		url: `/pages/common/homework/add?id=${id}`
	});
};

// 昨天
const getYestoday = () => {
	console.log('昨天')
	calendarDate.value = dayjs(calendarDate.value).subtract(1, 'day').format('YYYY-MM-DD')
}

// 明天
const getNextDay = () => {
	console.log('明天')
	calendarDate.value = dayjs(calendarDate.value).add(1, 'day').format('YYYY-MM-DD')
}

const getMinDate = () => {
	return dayjs().subtract(5, 'month').format('YYYY-MM-DD')
}
</script>

<style>
.subject-item {
	background: white;
	border-radius: 32rpx;
	padding: 30rpx;
	box-sizing: border-box;
	align-items: center;
	margin-bottom: 20rpx;
}

.homework-item {
	background: #F7F7F7;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.btn-detail {
	width: 160rpx;
	height: 54rpx;
	background: #FFF1D9;
	border-radius: 27rpx;
	color: #FFA40C;
	margin-top: 20rpx;
	text-align: center;
	line-height: 54rpx;
	font-size: 28rpx;
}
</style>